<template>
  <div class="pay">
    <van-sticky class="nav">
      <!-- 顶部导航 -->
      <van-nav-bar class="topNaV" @click-left="onClickLeft">
        <template #title>
          <p class="title">确定订单</p>
        </template>
        <template #left>
          <van-icon name="arrow-left" color="#666666" />
          <p class="left">返回</p>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!--  -->
    <van-swipe-cell class="pay-container">
      <div class="address">
        <div class="tag">
          <p class="tag-text">默认</p>
        </div>
        <div class="address-card">
          <p class="p1">
            <span>{{ address.address }}</span>
            <span>{{ address.address_detail }}</span>
          </p>
          <p class="p2">
            <span>{{ address.name }}</span>
            <span>{{ address.mobile }}</span>
          </p>
        </div>
        <div class="icon" @click="goaddress">
          <img class="icon-img" src="@/assets/icons/地点选择.png" alt="" />
        </div>
      </div>
    </van-swipe-cell>

    <!--  -->

    <!--  -->
    <div class="card-container">
      <div v-for="item in goodsList" :key="item.id" class="card-item">
        <div class="card-show">
          <van-card class="card">
            <template #thumb>
              <img :src="item.list_pic_url" alt="" />
            </template>
            <template #title>
              <p>{{ item.goods_name }}</p>
            </template>
            <template #price>
              <p class="price">￥{{ item.retail_price }}</p>
            </template>
            <template #num>
              <div class="num">×{{ item.number }}</div>
            </template>
          </van-card>
        </div>
      </div>
    </div>

    <!--  -->
    <div class="heji">
      <div class="text">
        <p class="text-left">商品合计</p>
        <p class="text-right">
          {{ allPrise }}
        </p>
      </div>
      <div class="text text1">
        <p class="text-left">运费</p>
        <p class="text-right">免运费</p>
      </div>

      <div class="text text1">
        <p class="text-left">优惠劵</p>
        <p class="text-right">暂无</p>
      </div>
    </div>
    <div class="zhen">
      实付: <span>￥{{ allPrise }}</span>
      <button @click="gopay">支付</button>
    </div>
  </div>
</template>

<script setup>
import { cartdetailAction } from '@/api/index'
import { ref } from 'vue'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const address = ref({})
const goodsList = ref([])
const allPrise = ref('')
const store = useStore()
const router = useRouter()
// const all = computed(
//   () => {
//     return allPrise.value
//   }
// )
cartdetailAction({
  openId: store.state.openId
}).then(res => {
  address.value = res.address
  goodsList.value = res.goodsList
  allPrise.value = res.allPrise
})
const goaddress = () => {
  router.push({ name: 'addressPage' })
}
const gopay = () => {
  alert('暂时不支持')
}
const onClickLeft = () => {
  router.back()
}
</script>
<script>

export default {
  name: 'payView'
}
</script>

<style scoped lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pay {
  margin-bottom: 134px;

  overflow: hidden;
  .nav {
    .topNav {
      .left {
        font-size: 31.2px;
        color: #666666;
        letter-spacing: 0;
        font-weight: 400;
      }

      .title {
        font-size: 36px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
  }
  .pay-container {
    width: 710px;
    margin: 20px;
    overflow: hidden;

    .address {
      width: 710px;
      height: 206px;
      //
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      .tag {
        height: 206px;
        width: 160px;
        .tag-text {
          box-sizing: border-box;
          height: 38px;
          width: 98px;
          border: 1px solid rgba(158, 66, 66, 1);
          border-radius: 4px;
          margin: 58px 35px 108px 26px;
          line-height: 38px;
          font-size: 24px;
          color: #9e4242;
          text-align: center;
        }
      }
      .address-card {
        width: 510px;
        height: 206px;
        display: flex;
        justify-content: flex-start;
        align-content: flex-start;
        flex-wrap: wrap;
        overflow: hidden;
        .p1 {
          width: 510px;
          text-align: left;
          font-size: 28px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 600;
          line-height: 40px;
          margin-top: 57.5px;
        }
        .p2 {
          width: 510px;
          text-align: left;
          font-size: 24px;
          color: #999999;
          letter-spacing: 0;
          font-weight: 400;
          height: 33px;
          line-height: 33px;
          margin-top: 14px;
        }
      }
      .icon {
        display: flex;
        align-items: center;
        .icon-img{
          width: 40px;
          height: 40px;
        }
      }
    }
  }
  .card-container {
    overflow: auto;
    .card-item {
      width: 710px;
      height: 253px;
      margin: 20px auto;
      background-color: #ffffff;

      .card-show {
        width: 710px;
        display: flex;
        height: 253px;
      }
      .card {
        width: 710px;
        height: 253px;

        margin: 0;
        overflow: hidden;
        background-color: #fff;

        img {
          margin: 42px 0 42px 28px;
          overflow: hidden;
          display: block;
          width: 174px;
          height: 169px;
        }

        p {
          margin-left: 31px;
          font-size: 30px;
          color: #333333;
          letter-spacing: 0;
          font-weight: 400;
          height: 42px;
          line-height: 42px;
          text-align: left;
          margin-top: 37px;
        }
        .price {
          font-size: 28px;
          color: #9e4242;
          letter-spacing: 0;
          font-weight: 500;
          height: 40px;
          line-height: 40px;
          margin-top: 99px;
          text-align: left;
          float: left;
        }
        .num {
          margin-top: 99px;
          text-align: left;
          float: right;
          height: 40px;
          line-height: 40px;
          margin-right: 20px;
        }
      }
    }
  }
  .heji {
    width: 710px;
    margin: 0 auto;
    .text {
      display: flex;
      width: 670px;
      margin: 0 auto;
      justify-content: space-between;
      overflow: hidden;
      height: 80px;
      line-height: 80px;
      .text-left {
        font-size: 24px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 400;
      }
      .text-right {
        font-size: 26px;
        color: #333333;
        letter-spacing: 0;
        font-weight: 500;
      }
    }
    .text1 {
      border-top: 1px solid #666666;
    }
  }
  .zhen {
    position: fixed;
    bottom: 0;
    width: 750px;
    height: 134px;
    margin: 0;
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 26px;
    color: #333333;
    letter-spacing: 0;
background-color: #fff;
    font-weight: 400;

    span {
      font-size: 28px;
      color: #9e4242;
      letter-spacing: 0;
      font-weight: 500;
      margin-right: 50px;
    }
    button {
      width: 193px;
      height: 70px;
      background: #cea62a;
      border-radius: 35.75px;
      border: none;
    }
  }
}

.delete-button {
  height: 100%;
}
</style>
